<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精彩视频 | 小糯米一周岁生日</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B9B',
                        secondary: '#6BCBFF',
                        accent: '#FFD66B',
                        dark: '#1A1A2E'
                    },
                    fontFamily: {
                        cute: ['"Comic Sans MS"', '"Bubblegum Sans"', 'cursive'],
                    }
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .video-card {
                transition: all 0.3s ease;
                cursor: pointer;
            }
            .video-card:hover {
                transform: translateY(-8px);
            }
            .video-card.active {
                border-color: #FF6B9B;
                background-color: rgba(255, 107, 155, 0.05);
            }
            .play-button {
                transition: all 0.3s ease;
            }
            .video-card:hover .play-button {
                transform: scale(1.1);
            }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen font-cute overflow-x-hidden">
    <!-- 背景音乐 -->
    <audio id="background-music" loop>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    </audio>
    <audio id="play-sound">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3" type="audio/mpeg">
    </audio>
    <audio id="applause-sound">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3" type="audio/mpeg">
    </audio>

    <!-- 主内容 -->
    <div class="container mx-auto px-4 py-8 relative z-10">
        <!-- 导航 -->
        <nav class="flex justify-between items-center mb-10">
            <a href="index.html" class="text-gray-700 hover:text-primary transition-colors flex items-center">
                <i class="fa fa-home mr-2"></i> 首页
            </a>
            <h1 class="text-2xl md:text-3xl font-bold text-primary">精彩视频集锦</h1>
            <div class="w-10"></div> <!-- 占位，保持导航平衡 -->
        </nav>

        <!-- 页面标题 -->
        <div class="text-center mb-10">
            <h2 class="text-[clamp(1.5rem,5vw,3rem)] font-bold text-primary mb-4">小糯米的动态回忆</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">记录那些可爱的瞬间，动态捕捉成长的每一刻</p>
        </div>

        <!-- 视频播放器 -->
        <div class="max-w-4xl mx-auto mb-12 bg-white rounded-2xl shadow-xl overflow-hidden">
            <div class="aspect-video bg-gray-900 relative">
                <!-- 视频播放器 -->
                <video id="main-video" class="w-full h-full object-cover" controls poster="">
                    <source id="video-source" src="" type="video/mp4">
                    您的浏览器不支持视频播放
                </video>

                <!-- 加载指示器 -->
                <div id="video-loading" class="absolute inset-0 flex items-center justify-center hidden">
                    <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
                </div>
            </div>

            <div class="p-6">
                <h3 id="video-title" class="text-2xl font-bold text-primary mb-2"></h3>
                <p id="video-description" class="text-gray-600"></p>
            </div>
        </div>

        <!-- 视频列表 -->
        <div class="max-w-5xl mx-auto mb-16">
            <h3 class="text-2xl font-bold text-center text-gray-800 mb-8">视频列表</h3>

            <div id="videos-list" class="space-y-4">
                <!-- 视频项将通过JS动态生成 -->
            </div>
        </div>

        <!-- 观看提示 -->
        <div class="max-w-2xl mx-auto bg-white rounded-xl p-6 shadow-md border border-gray-100">
            <h4 class="text-xl font-bold text-primary mb-4 flex items-center">
                <i class="fa fa-info-circle mr-2"></i> 观看提示
            </h4>
            <ul class="text-gray-600 space-y-2">
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                    <span>点击视频列表中的任意视频可以切换播放内容</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                    <span>视频播放完毕后会自动播放下一个视频</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                    <span>建议在WiFi环境下观看，以获得更好的体验</span>
                </li>
            </ul>
        </div>
    </div>

    <script>
        // 视频数据
        let videosData = [];
        let currentVideoIndex = 0;
        let isPlaying = false;

        // DOM加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 加载视频数据
            fetch('data/content.json')
                .then(response => {
                    if (!response.ok) throw new Error('数据加载失败');
                    return response.json();
                })
                .then(data => {
                    videosData = data.videos;

                    // 初始化页面
                    initVideos();
                })
                .catch(error => {
                    console.error('初始化失败:', error);
                    alert('页面加载失败，请刷新重试');
                });

            // 播放背景音乐
            const music = document.getElementById('background-music');
            music.volume = 0.2;
            music.play().catch(e => {
                console.log('需要用户交互才能播放音乐:', e);
                document.addEventListener('click', () => {
                    music.play();
                }, { once: true });
            });
        });

        // 初始化视频播放器
        function initVideos() {
            // 创建视频列表
            createVideoList();

            // 加载第一个视频
            if (videosData.length > 0) {
                loadVideo(0);
            }

            // 绑定视频结束事件
            document.getElementById('main-video').addEventListener('ended', function() {
                // 播放下一个视频
                currentVideoIndex = (currentVideoIndex + 1) % videosData.length;
                loadVideo(currentVideoIndex);

                // 播放掌声音效
                document.getElementById('applause-sound').play();
            });

            // 绑定视频加载事件
            const video = document.getElementById('main-video');
            video.addEventListener('loadstart', function() {
                document.getElementById('video-loading').classList.remove('hidden');
            });
            video.addEventListener('canplay', function() {
                document.getElementById('video-loading').classList.add('hidden');
                if (isPlaying) {
                    video.play();
                }
            });
        }

        // 创建视频列表
        function createVideoList() {
            const container = document.getElementById('videos-list');
            container.innerHTML = '';

            videosData.forEach((video, index) => {
                const videoCard = document.createElement('div');
                videoCard.className = `video-card ${index === 0 ? 'active' : ''} bg-white rounded-xl shadow-md overflow-hidden flex flex-col md:flex-row`;
                videoCard.dataset.index = index;

                videoCard.innerHTML = `
                    <div class="relative w-full md:w-1/3 aspect-video md:aspect-auto">
                        <img src="${video.thumbnail}" alt="${video.title}" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
                            <div class="play-button w-12 h-12 bg-primary rounded-full flex items-center justify-center">
                                <i class="fa fa-play text-white"></i>
                            </div>
                        </div>
                        <div class="absolute bottom-3 right-3 bg-black/70 text-white text-xs px-2 py-1 rounded">
                            ${video.duration}
                        </div>
                    </div>
                    <div class="p-4 w-full md:w-2/3">
                        <h4 class="font-bold text-gray-800 mb-1">${video.title}</h4>
                        <p class="text-gray-500 text-sm mb-2 line-clamp-2">${video.description}</p>
                        <div class="text-xs text-gray-400">
                            <i class="fa fa-calendar-o mr-1"></i> ${video.date}
                        </div>
                    </div>
                `;

                // 点击切换视频
                videoCard.addEventListener('click', function() {
                    const index = parseInt(this.dataset.index);
                    if (index !== currentVideoIndex) {
                        loadVideo(index);
                        document.getElementById('play-sound').play();
                    }
                });

                container.appendChild(videoCard);
            });
        }

        // 加载视频
        function loadVideo(index) {
            isPlaying = true;
            currentVideoIndex = index;

            // 更新视频源
            const video = document.getElementById('main-video');
            const source = document.getElementById('video-source');
            const videoData = videosData[index];

            // 更新视频信息
            document.getElementById('video-title').textContent = videoData.title;
            document.getElementById('video-description').textContent = videoData.description;
            video.poster = videoData.thumbnail;

            // 加载并播放视频
            source.src = videoData.url;
            video.load();

            // 更新视频列表选中状态
            document.querySelectorAll('.video-card').forEach((card, i) => {
                if (i === index) {
                    card.classList.add('active');
                } else {
                    card.classList.remove('active');
                }
            });

            // 滚动到顶部
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    </script>
</body>
</html>